<script setup>
import { ref, onMounted, unref,watch  } from 'vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import { MessagePlugin } from 'tdesign-vue-next';
import { useQueryStore, CriteriaStore,useUserStore,useCityStore,PageStore } from '@/stores'
import { SearchIcon,ChatMessageIcon } from 'tdesign-icons-vue-next';
import { ClickOutside as vClickOutside } from 'element-plus'
import {ArrowDown,ChatDotRound} from '@element-plus/icons-vue'
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
const criteria = CriteriaStore()
const pageStore = PageStore()
const queryStore = useQueryStore()
const formData = ref({
    job: queryStore.query.job,
    city: queryStore.query.city,
    experience: queryStore.query.experience,
    salaryBottom: queryStore.query.salaryBottom,
    salaryTop: queryStore.query.salaryTop,
    degrees: queryStore.query.degrees,
    scale: queryStore.query.scale,
    financing: queryStore.query.financing,
})
const fullscreenLoading = ref(false)
const current = ref(1)
const page = ref(20)
const total = ref(0)
const job = ref(null)
const backfather = (num) => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.get('http://localhost:8000/user/guide/industry',{
        params:{
            industry: num,
        },
        headers:{
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            job.value = resp.data.data;
        }
    })
}
const buttonRef2 = ref()
const popoverRef2 = ref()
const onClickOutside2 = () => {
  unref(popoverRef2).popperRef?.delayHide?.()
}
const buttonRef3 = ref()
const popoverRef3 = ref()
const onClickOutside3 = () => {
  unref(popoverRef3).popperRef?.delayHide?.()
}
const buttonRef4 = ref()
const popoverRef4 = ref()
const onClickOutside4 = () => {
  unref(popoverRef4).popperRef?.delayHide?.()
}
const buttonRef5 = ref()
const popoverRef5 = ref()
const onClickOutside5 = () => {
  unref(popoverRef5).popperRef?.delayHide?.()
}
const buttonRef6 = ref()
const popoverRef6 = ref()
const onClickOutside6 = () => {
  unref(popoverRef6).popperRef?.delayHide?.()
}
const buttonRef7 = ref()
const popoverRef7 = ref()
const onClickOutside7 = () => {
  unref(popoverRef7).popperRef?.delayHide?.()
}
//-----------------------------------------
const useCity = useCityStore()
const dialogCityVisible = ref(false)

const citylist = ref(null)
const choose_city = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.get('http://localhost:8000/user/getCity',{
        headers: {
            authentication: userStore.token,
        }
    })
    .then(resp => {
    if(resp.data.code === 1){
      citylist.value = resp.data.data

      dialogCityVisible.value = true

      }
    }).catch(error => {
        MessagePlugin.error("请求失败！")
    })
}

const value = ref('');
watch(current, (x) => {
    console.log(x)
    startgetjob()
})
watch(page, (x) => {
    console.log(x)
    startgetjob()
})

const jobList = ref(null)
const startgetjob = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    fullscreenLoading.value = true
    
    axios.post('http://localhost:8000/user/queryjob/getjob',
    {
        job: queryStore.query.job,
        city: queryStore.query.city,
        experience: queryStore.query.experience,
        salaryBottom: queryStore.query.salaryBottom,
        salaryTop: queryStore.query.salaryTop,
        degrees: queryStore.query.degrees,
        scale: queryStore.query.scale,
        financing: queryStore.query.financing,
        page: current.value,
        pageSize: page.value,
    },{
        headers:{
            authentication: userStore.token,
        }
    })
    .then(resp => {
        if(resp.data.code === 1){
            console.log(resp.data.data)
            total.value = resp.data.data.total
            jobList.value = resp.data.data.dataList
            console.log(resp.data.data.dataList)
            fullscreenLoading.value = false
        }
    })
}
onMounted(() => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    startgetjob()
    hotJob()
})

let ccity = ''
const address = (add1,add2,add3) => {
    ccity = add1
    if(!add1)return null
    if(add2){
        ccity = ccity + '·' + add2;
    }
    if(add3){
        ccity = ccity + '·' + add3;
    }
    return ccity
}
let benefitsList = []; 
const welfareList = (list) => {
    let arrayData = JSON.parse(list);  
    return arrayData.slice(0,5)
}
const setJob = (jobname) => {
    queryStore.setQuery({job : jobname})
    formData.value.job = jobname;  
    startgetjob()
    hotJob()
}
const setCity = (cityname) => {
    if(cityname === '全国'){
        queryStore.setQuery({city : null})
        formData.value.city = null;

    }else{
        queryStore.setQuery({city : cityname})
        formData.value.city = cityname;
    }
    dialogCityVisible.value = false;
    startgetjob()
}
const setExperience = (exper) => {
    if(exper === '不限'){
        queryStore.setQuery({experience : null})
        formData.value.experience = null;
    }else{
        queryStore.setQuery({experience : exper})
        formData.value.experience = exper;
    }
    startgetjob()
}
const setSalary = (bottom, top) => {
    queryStore.setQuery({salaryBottom : bottom})
    queryStore.setQuery({salaryTop : top})
    formData.value.salaryBottom = bottom;
    formData.value.salaryTop = top;
    startgetjob()
}
const setDegrees = (degree) => {
    if(degree === '不限'){
        queryStore.setQuery({degrees : null})
        formData.value.degrees = null;
    }else{
        queryStore.setQuery({degrees : degree})
        formData.value.degrees = degree;
    }
    startgetjob()
}
const setScale = (scalename) => {
    if(scalename === '不限'){
        queryStore.setQuery({scale : null})
        formData.value.scale = null;
    }else {
        queryStore.setQuery({scale : scalename})
        formData.value.scale = scalename;
    }
    startgetjob()
}
const setFinancing = (fin) => {
    if(fin === '不限'){
        queryStore.setQuery({financing : null})
        formData.value.financing = null;
    }else{
        queryStore.setQuery({financing : fin})
        formData.value.financing = fin
    }
    startgetjob()
}
//----------------------------------------
const HotJob = ref([]);
const hotJob = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.get('http://localhost:8000/user/hotjob',{
        params:{
            job: queryStore.query.job,
        },
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            HotJob.value = resp.data.data;
            // console.log(resp.data.data)
        }
    })
}
const addHot = (id) => {
    axios.get('http://localhost:8000/user/addhot',{
        params:{
            id,
        },
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code !== 1){
            MessagePlugin.error("请求失败！")
        }else{
            console.log(resp.data)
        }
    })
}
</script>

<template>
    <div class="back">
        <div class="image" >
            <div>
                <t-card bordered style="width:1220px;
                margin-left: 240px;
                border-radius: 15px;
                ">
                <div style="display: inline-block;
                margin-right: 30px;
                width: 40px;
                font-size: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;">{{formData.city}}</div>
                    <div style="width: 800px;
                    background-color: rgb(50, 176, 249);
                    border-radius: 12px;
                    padding: 2px;
                    margin-top: 18px;
                    display: inline-block;
                    ">
                        
                        <input class="input" v-model="formData.job" placeholder="搜索职位" clearable type="text">
                        <el-button @click="setJob(formData.job)" style="background-color: rgb(50, 176, 249);
                        border: 1px solid rgb(50, 176, 249);
                        color: white;
                        font-weight: 500;
                        font-size: 24px;
                        margin-left: 10px;">
                            <SearchIcon  style="transform: scale(1.2);margin-right: 15px;"/>搜索
                        </el-button>
                    </div>
                    <div style="margin-top: 20px;">
                        <div class="area" style="color: rgb(39, 148, 211);
                        font-size: 18px;
                        font-weight: 500;
                        ">城市和区域</div>
                        <div style="margin-top: 20px;">
                            <div v-loading.fullscreen.lock="fullscreenLoading"
                            v-for="(x, index) in useCity.city" :key="index"
                            @click="setCity(x)" class="hot_city">{{ x }}</div>
                            <div class="hot_city" plain @click="choose_city">其他城市</div>
                            <el-dialog v-model="dialogCityVisible" title="请选择城市："
                            width="650"
                            style="height: 400px;
                            overflow-y: auto;">
                                <div style="width: 610px;" v-for="(x, index) in citylist" :key="index">
                                    <div class="form" style="width: 100px;">{{x.flag}}</div>
                                    <div class="form" style="width: 500px;margin-bottom: 20px;" >
                                        <div  style="display: inline-block;
                                        margin-right: 20px; margin-bottom: 10px;cursor: pointer;
                                        "@click="setCity(y)" v-for="(y, index) in x.cityList">{{y}}</div>
                                    </div>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </t-card> 
                <t-card bordered style="width:1220px;
                margin-left: 240px;
                border-radius: 15px;
                margin-top: 10px;">
                    <el-popover  placement="bottom-start" :width="750" trigger="click">
                        <template #reference>
                          <el-button class="button" style="margin-right: 16px">职位类型<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                            <div v-if="formData.job" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                        </el-button>
                        </template>
                        <div style="height: 300px;">
                            <div class="shou" style="display: inline-block;">
                                <div class="label"
                                style="width: 100px; cursor: pointer;
                                margin-right: 10px;"
                                @click="backfather(x.name)"
                                v-for="(x, index) in criteria.Industry" :key="index">{{x.name}}
                                </div>
                            </div>
                            
                            <div class="shou" style="width: 570px; display: inline-block;"
                            >
                                <div v-for="(y, index) in job" :key="index" style="margin-bottom: 10px;">
                                    <div style="width: 140px;
                                     float: left;
                                     margin-left: 10px;
                                     padding-top: 10px;
                                     ">{{y.direction}}
                                    </div>
                                    <div style="width: 400px; display: inline-block;">
                                        <div class="label" style=" float: left;
                                        padding-right: 10px !important;
                                        cursor: pointer;" @click="setJob(z)"
                                        v-for="(z, index) in y.jobList" :key="index">{{z}}</div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                      </el-popover>

                      <el-button class="button" ref="buttonRef2" v-click-outside="onClickOutside2">
                        求职身份<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                        <div v-if="formData.experience" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                    </el-button>
                      <el-popover
                        ref="popoverRef2"
                        :virtual-ref="buttonRef2"
                        trigger="click"
                        virtual-triggering
                        style="margin-left: 20px;"
                      >
                        <div class="label" @click="setExperience(x.name)" v-for="(x, index) in criteria.userID" :key="index">{{x.name}}</div>
                      </el-popover>
                      <el-button class="button" ref="buttonRef3" v-click-outside="onClickOutside3">
                        工作经验<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                        <div v-if="formData.experience" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                      </el-button>
                      <el-popover
                        ref="popoverRef3"
                        :virtual-ref="buttonRef3"
                        trigger="click"
                        virtual-triggering
                        style="margin-left: 20px;"
                      >
                        <div class="label" @click="setExperience(x.name)" v-for="(x, index) in criteria.experienece" :key="index">{{x.name}}</div>
                      </el-popover>
                      
                    <el-button class="button" ref="buttonRef4" v-click-outside="onClickOutside4">
                        薪资待遇<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                        <div v-if="formData.salaryBottom + formData.salaryTop > 0" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                    </el-button>
                        <el-popover
                            ref="popoverRef4"
                            :virtual-ref="buttonRef4"
                            trigger="click"
                            virtual-triggering
                            style="margin-left: 20px;"
                        >
                            <div class="label" @click="setSalary(x.bottom,x.top)" v-for="(x, index) in criteria.salary" :key="index">{{x.name}}</div>
                        </el-popover>
                      <el-button class="button" ref="buttonRef5" v-click-outside="onClickOutside5">
                        学历要求<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                        <div v-if="formData.degrees" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                    </el-button>
                        <el-popover
                        ref="popoverRef5"
                        :virtual-ref="buttonRef5"
                        trigger="click"
                        virtual-triggering
                        style="margin-left: 20px;"
                      >
                        <div class="label" @click="setDegrees(x.name)" v-for="(x, index) in criteria.degrees" :key="index">{{x.name}}</div>
                      </el-popover>
                      <el-button class="button" ref="buttonRef6" v-click-outside="onClickOutside6">
                        公司规模<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                        <div v-if="formData.scale" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                    </el-button>
                      <el-popover
                        ref="popoverRef6"
                        :virtual-ref="buttonRef6"
                        trigger="click"
                        virtual-triggering
                        style="margin-left: 20px;
                        "
                      >
                        <div class="label" @click="setScale(x.name)" v-for="(x, index) in criteria.scale" :key="index">{{x.name}}</div>
                      </el-popover>
                      <el-button class="button" ref="buttonRef7" v-click-outside="onClickOutside7">
                        融资阶段<el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                        <div v-if="formData.financing" style="width: 8px;
                         height: 8px; 
                         border-radius: 50%;
                         background-color: rgb(50, 176, 249);
                         position: relative;
                         top: -9px;
                         left: 8px;"></div>
                    </el-button>
                      <el-popover
                        ref="popoverRef7"
                        :virtual-ref="buttonRef7"
                        trigger="click"
                        virtual-triggering
                        style="margin-left: 20px;"
                      >
                        <div class="label" @click="setFinancing(x.name)" v-for="(x, index) in criteria.financing" :key="index">{{x.name}}</div>
                      </el-popover>
                </t-card> 
            </div>
        </div>
        <div style="padding-top: 20px;">
            <div style="float: left;" >
                <t-card hover-shadow class="info"  style="width:900px;
                margin-left: 240px;
                border-radius: 15px;
                height: 140px;
                margin-bottom: 20px;
                cursor: pointer;"
                @click="addHot(x.id)"
                v-for="(x, index) in jobList" :key="index"> 
                <div style="
                width: 800px;
                height: 70px;">
                    <div style="float: left; width: 450px;">
                        <div class="header">
                            <span style="font-family: 微软雅黑;
                            font-size: 17px;
                            margin-right: 16px;">{{x.job}}</span>
                            <span style="font-family: 微软雅黑;
                            font-size: 17px;">[{{address(x.city,x.addressOne,xaddressTwo)}}]</span>
                        </div>
                        <div style="margin-top: 12px;">
                            <div style="float: left;
                            color: red;
                            margin-right: 13px;
                            font-size: 15px;">{{x.salary}}</div>
                            <div style="float: left;
                            border-radius: 4px;
                            background-color: #ececec;
                            padding: 0px 8px;
                            margin-right: 12px;">{{x.experience}}</div>
                            <div style="float: left;
                            border-radius: 4px;
                            background-color: #ececec;
                            padding: 0px 8px;
                            margin-right: 12px;">{{x.degrees}}</div>
                            <div class="talk">
                            <ChatMessageIcon class="icon"
                            />·{{x.bossName}}·{{x.bossJob}}</div>
                            
                        </div>
                    </div>
                    <div style="float: left; width: 340px;">
                        <img class="logo"
                        :src= 'x.logo'
                        style="width: 55px;
                        height: 55px;
                        float: left;
                        border-radius: 10px;"></img>
                        <div style="float: left;">
                            <div class="head" style="font-family: 微软雅黑;
                            font-size: 17px;
                            margin-left: 15px;">{{x.company}}</div>
                            <div style="margin-top: 12px;">
                                <div style="float: left;
                                border-radius: 4px;
                                background-color: #ececec;
                                padding: 0px 8px;
                                margin-left: 15px;
                                margin-right: 12px;">{{x.financing}}</div>
                                <div style="float: left;
                                border-radius: 4px;
                                background-color: #ececec;
                                padding: 0px 8px;
                                margin-left: 15px;
                                margin-right: 12px;">{{x.scale}}</div>
                                </div>
                        </div>
                    </div>
                </div>
                <t-divider style="margin: 0px !important;"/>
                <div style="
                width: 800px;
                margin-top: 12px;
                ">
                    <div style="float: left;width: 450px;display: flex; align-items: flex-start;">
                        <div class="label-1 "
                        v-for="(y, index) in welfareList(x.label)">{{y}}</div>
                    </div>
                    <div class="welfare" style="float: left; ">
                        <div class="label-1 "
                        v-for="(y, index) in welfareList(x.welfare)" :key="index">{{y}}</div>
                    </div>
                </div>
                    
                </t-card>

            </div>
            <div v-if="total > 0" style="display: inline-block; width: 298px;margin-left: 22px;">
                <img src="/src/assests/select-job.jpg" style="width: 298px;border-radius: 15px;" alt="">
                <t-card v-for="(x, index) in HotJob" :key="index" style="width: 298px; border-radius: 15px;margin-top: 20px;">
                    <div style="font-size: 16px;font-weight: 600;">热招职位</div>
                    <t-divider style="margin: 10px 0px !important;"/>
                    <div>
                        <div>
                            <div style="width: 135px;
                            float: left;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;">{{x.job}}</div>
                            <div style="width: 110px;
                            text-align: right;
                            display: inline-block;
                            color: #666666;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;">{{x.city}}</div>
                        </div>
                        <div style="margin-top: 10px;">
                            <div style="float: left;width: 90px;
                            color: red;
                            font-size: 13px;">{{x.salary}}</div>
                            <div style="display: inline-block;
                            width: 155px;
                            text-align: right;
                            color: #666666;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;">{{x.company}}</div>
                        </div>
                    </div>
                </t-card>
                
            </div>
            <t-pagination v-if="total > page" v-model="current" v-model:page-size="page" :total="total" />
        </div>
        
    </div>
    
    
        
      
</template>

<style scoped>
.welfare{
    width: 345px;
    display: flex; align-items: flex-start;
}
.back{
    background: linear-gradient(to bottom,  rgb(105, 197, 250) 10%, white 100%);
    padding-top: 20px;
}
.input {  
    width: 625px;  
    height: 27px;
    padding: 10px;  
    font-size: 16px;  
    border: 1px solid rgb(50, 176, 249);
    border-radius: 10px; 
    transition: all 0.3s ease; 
}
.input:focus {  
    outline: none;
  } 
.area{
    color: rgb(39, 148, 211);
    font-size: 18px;
    font-weight: 500;
    position: relative;  
    display: inline-block; 
}
.area::after{
    content: '';  
    position: absolute;  
    width: 100%;  
    height: 1px;  
    bottom: -0.5em; 
    left: 0;  
    border-bottom: 4px solid rgb(39, 148, 211); 
}
.hot_city{
    display: inline-block;
    margin-left: 10px;
    margin-right: 15px;
    cursor: pointer;
    
}
.hot_city:hover{
    color: rgb(50, 176, 249);
}
.form{
    float: left;
}
.button{
    width: 110px;
    background-color: #f6f4f4;
    margin-right: 10px;
}
.label{
    text-align: left;
    font-size: 13px;
    padding: 10px 0px 10px 10px !important;
    border-radius: 6px;
    cursor: pointer;
}
.label:hover{
    color: rgb(50, 176, 249);
    background-color: #f0eded;
}
.shou{
    height: 300px;
    overflow-y: scroll;
    float: left; 
    box-sizing: border-box; 
} 

.card::before {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 50%; 
    background: linear-gradient(to right, red, blue); 
    z-index: -1; 
    background-position: 0 100%; 
}
.head:hover{
    color: rgb(50, 176, 249);
}
.talk{
    float: left;
    /* width: 170px; */
    text-align: center;
    border: 1px solid #e6e4e4;
    padding: 0px 8px;
    border-radius: 5px;
    cursor: pointer;
}
.icon{
    margin-right: 6px;
    color: rgb(50, 176, 249);
    transform: scale(1.3);
}
.info:hover{
    transform: scale(1.01);
    .header{
        color: rgb(50, 176, 249);
    }
    .talk{
        color: white;
        background-color: rgb(50, 176, 249);
    }
    .icon{
        color: white;

    }
}
.label-1{
    float: left;
    border-radius: 4px;
    background-color: #ececec;
    padding: 0px 5px;
    margin-right: 6px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>